<template>
    <div class="poa loginbody">
        <div @click="quit" class="cuo">
            <div></div>
            <div></div>
        </div>
        <div @click="enroll" class="zhuche">
            <span>注册账号</span>
        </div>
        <div class="login_body_content">
            <div class="login_body_content_title">
                登陆后即可展示自己
            </div>
            <input_ @error="email_error" @input="email_input" :text="'输入邮箱'" :rules="'required|email'" />
            <input_ @error="password_error" @input="password_input" :text="'输入密码'" :rules="'required|minLength:6'" />
            <div class="login_submit">
                <button @click="login_submit" v-botton ref="login_btn" class="login_btn">登录</button>
            </div>
            <div @click="last_password" class="last_password">
                忘记了?找回密码
            </div>
            <MyMessage :flag="alert_flag" :text="error_text" />
        </div>
    </div>
</template>
<script setup>
import { defineEmits, ref, reactive, defineAsyncComponent } from 'vue';
import { login } from '../../api/api'
const input_ = defineAsyncComponent(() => import('../common/input_plus.vue'))
const emit = defineEmits(['quit', 'enroll', 'login_succsess', 'last_password'])
function quit() {
    emit('quit')
}
let error_text = ref('')
let login_btn = ref()
let alert_flag = ref(false)
let form = reactive(
    {
        email: '',
        password: ''
    }
)
let error = reactive(
    {
        email_error: '',
        password_error: '',
    }
)
function alertfn(text) {
    error_text.value = text
    alert_flag.value = true
    setTimeout(() => {
        alert_flag.value = false
    }, 2000)
}
function last_password() {
    if (error.email_error || !form.email) {
        alertfn('请正确填写邮箱格式')
        return
    }
    emit('last_password', form.email)
}
function enroll() {
    emit('enroll')
}
function login_submit() {
    login(form).then(res => {
        if (res) {
            if (res.data) {
                if (res.data.code == 200) {
                    localStorage.setItem('user', JSON.stringify(res.data.data))
                    alertfn('登录成功')
                    setTimeout(() => {
                        emit('login_succsess')
                    }, 1000)
                } else {
                    alertfn('用户名不存在或密码错误')
                }
            } else {
                alertfn('网络超时')
            }
        }else{
            alertfn('网络超时')
        }
    })
}
function display() {
    if (!error.email_error && !error.password_error && form.email && form.password) {
        login_btn.value.style = 'width:100%;height:100%;color:#fff;'
        login_btn.value.disabled = false
    } else {
        login_btn.value.style = 'width:0%;height:0%;color: #ffffff00; '
        login_btn.value.disabled = true
    }
}
function email_error(value) {
    error.email_error = value
    display()
}
function password_error(value) {
    error.password_error = value
    display()
}
function email_input(value) {
    form.email = value
}
function password_input(value) {
    form.password = value
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.login_submit {
    width: 100%;
    height: r(44);
    position: relative;

    button {
        width: 0%;
        height: 0%;
        transform: translate(-50%, -50%);
        background-color: #fe1e4b;
        color: #ffffff00;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: r(16);
        transition: 0.5s;
        border-radius: r(5);
        box-shadow: 0 0 r(6) #fc3058;
    }
}

.last_password {
    font-size: r(10);
    color: #999;
    text-align: right;
    margin-top: r(10);
}

.loginbody {
    padding-top: r(100);
    display: flex;
    justify-content: center;
    position: relative;
    background-color: #fff;

    .login_body_content {
        width: 70%;

        .login_body_content_title {
            text-align: center;
            width: 100%;
            font-size: r(22);
            color: #222;
            margin-bottom: r(33);
        }
    }

    .zhuche {
        position: absolute;
        right: r(20);
        top: r(17);
        font-size: r(16);
        color: #666;
    }

    .cuo {
        position: absolute;
        left: r(20);
        top: r(20);
        width: r(16);
        height: r(16);

        div {
            width: 100%;
            height: r(2);
            background-color: #666;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        :nth-child(1) {
            transform: translate(-50%, -50%) rotate(45deg);
        }

        :nth-child(2) {
            transform: translate(-50%, -50%) rotate(-45deg);
        }
    }
}
</style>